<template>
	<view class="Lista" v-for="item in Listcon" v-if="Listcon.length" @click="goxq(item)">
		<view>
			<image :src="item.goods_small_logo"  style="width: 100%;height: 100%;"></image>
		</view>
		<view>
			<view>{{item.goods_name}}</view>
			<view class="coloar">{{item.goods_price}}</view>
		</view>
	</view>
	<view>
		{{baoqian}}
	</view>
</template>
<script>
	export default {
		data() {
			return {
					// 请求参数对象
				    queryObj: {
				      // 查询关键词
				      query: '',
				      // 商品分类Id
				      cid: '',
				      // 页码值
				      pagenum: 1,
				      // 每页显示多少条数据
				      pagesize: 10
				    },
					Listcon:[],
					tiel:0,
					jieliu:true,
					baoqian:''
			};
		},
		onLoad(opction){
			this.queryObj.query = opction.name;
			this.ajaxa();
		},
		methods:{
			ajaxa(){
				let th = this;
				th.jieliu = false
				uni.request({
					url:`https://www.uinav.com/api/public/v1/goods/search`,
					data:{
						query:th.queryObj.query,
						cid:th.queryObj.cid,
						pagenum:th.queryObj.pagenum,
						pagesize:th.queryObj.pagesize,
					},
					success(res) {
						if(!res.data.message.goods.length){
							th.baoqian = '抱歉界面没有数据'
						}
						th.tiel = res.data.message.total
						console.log(res)
						th.Listcon = [...res.data.message.goods,...th.Listcon];
						th.queryObj.pagenum++;
						th.jieliu = true
					}
				})
			},
			goxq(item){
				uni.navigateTo({
					url: "/subpkg/goods/goods?id="+item.goods_id
				})
			}
		},
		onReachBottom(){
			if(this.queryObj.pagenum * this.queryObj.pagesize >= this.tiel){
				return
			}
			if(this.jieliu) this.ajaxa();
			
		},
		onPullDownRefresh(){
			 this.queryObj.pagenum = 1
			 this.tiel = 0
			 this.jieliu = true
			 this.Listcon = []
			 this.ajaxa()
		}
	}
</script>

<style lang="scss">
	.Lista{
		display: flex;
		height:140rpx;
		margin-top: 40rpx;
		>view:nth-child(1){
			width:100rpx;
			height:140rpx;
			margin:0 20rpx;
			overflow: hidden;
		}
		>view:nth-child(2){
			flex:1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
	.coloar{
		font-size: 29rpx;
		font-weight: bold;
		color:red;
	}
</style>
